<template>
  <el-row>
    <el-col :span="6">
      <h3>Draggable 1</h3>
      <draggable
          :list="list1"
          group="people"
          @change="log"
          itemKey="name"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">{{ element.name }} {{ index }}</div>
        </template>
      </draggable>
    </el-col>
    <el-col :span="6">

      <h3>Draggable 2</h3>
      <draggable
          :list="list2"
          group="people"
          @change="log"
          itemKey="name"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">{{ element.name }} {{ index }}</div>
        </template>
      </draggable>
    </el-col>
    <el-col :span="6">
      <rawDisplayer class="col-3" :value="list1" title="List 1"/>
    </el-col>
    <el-col :span="6">
      <rawDisplayer class="col-3" :value="list2" title="List 2"/>

    </el-col>
  </el-row>
  <div class="row">


  </div>
</template>
<script>
import draggable from "vuedraggable";
import RawDisplayer from "./components/raw-displayer.vue";

export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable,
    RawDisplayer
  },
  data() {
    return {
      list1: [
        {name: "John", id: 1},
        {name: "Joao", id: 2},
        {name: "Jean", id: 3},
        {name: "Gerard", id: 4}
      ],
      list2: [
        {name: "Juan", id: 5},
        {name: "Edgard", id: 6},
        {name: "Johnson", id: 7}
      ]
    };
  },
  methods: {
    add: function () {
      this.list.push({name: "Juan"});
    },
    replace: function () {
      this.list = [{name: "Edgard"}];
    },
    clone: function (el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function (evt) {
      window.console.log(evt);
    }
  }
};
</script>